<template>
  <view class="index">
    <FixedTitle Title="我的"></FixedTitle>
    <BlankDiv></BlankDiv>
    <input type="color" />
    <custormTabbar ref="tabbar"></custormTabbar>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import custormTabbar from "../../components/Tabbar/index.vue";
import uaLoading from "../../components/pageLoading/index.vue";
import BlankDiv from "../../components/blank_div/index.vue";
import FixedTitle from "../../components/FixedTitle/fixed-title.vue";

const loadingstyle = ref(false);

onMounted(() => {
  loadingstyle.value = true;
});
</script>

<style lang="scss">
.home-index-container {
  display: flex;
  flex-direction: column;

  .custom-loading {
    display: inline-flex;
    align-items: flex-end;
    gap: 5px;
    min-height: 45px;
  }

  .custom-loading em {
    background: #5232b7;
    border-radius: 6px;
    display: inline-block;
    height: 100%;
    width: 10px;
    animation: animHeart 2s linear infinite;
  }

  @keyframes animHeart {
    0%,
    100% {
      height: 15px;
      background: #5232b7;
    }

    50% {
      height: 45px;
      background: #999;
    }
  }

  .custom-loading em:nth-child(2) {
    animation-delay: 0.2s;
  }

  .custom-loading em:nth-child(3) {
    animation-delay: 0.4s;
  }

  .custom-loading em:nth-child(4) {
    animation-delay: 0.6s;
  }

  .custom-loading em:nth-child(5) {
    animation-delay: 0.8s;
  }
}
</style>
